<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

// Props
const props = defineProps({
  identifyCode: {
    type: String,
    default: '1234',
  },
  fontSizeMin: {
    type: Number,
    default: 28,
  },
  fontSizeMax: {
    type: Number,
    default: 40,
  },
  backgroundColorMin: {
    type: Number,
    default: 180,
  },
  backgroundColorMax: {
    type: Number,
    default: 240,
  },
  colorMin: {
    type: Number,
    default: 50,
  },
  colorMax: {
    type: Number,
    default: 160,
  },
  lineColorMin: {
    type: Number,
    default: 40,
  },
  lineColorMax: {
    type: Number,
    default: 180,
  },
  dotColorMin: {
    type: Number,
    default: 0,
  },
  dotColorMax: {
    type: Number,
    default: 255,
  },
  contentWidth: {
    type: Number,
    default: 112,
  },
  contentHeight: {
    type: Number,
    default: 35,
  }
})

// Reactive references
const contentWidth = ref(props.contentWidth)
const contentHeight = ref(props.contentHeight)
const identifyCode = ref(props.identifyCode)

// Helper methods
const randomNum = (min, max) => Math.floor(Math.random() * (max - min) + min)

const randomColor = (min, max) => {
  const r = randomNum(min, max)
  const g = randomNum(min, max)
  const b = randomNum(min, max)
  return `rgb(${r},${g},${b})`
}

// Drawing methods
const drawText = (ctx, txt, i) => {
  ctx.fillStyle = randomColor(props.colorMin, props.colorMax)
  ctx.font = `${randomNum(props.fontSizeMin, props.fontSizeMax)}px SimHei`
  const x = (i + 1) * (contentWidth.value / (identifyCode.value.length + 1))
  const y = randomNum(props.fontSizeMax, contentHeight.value - 5)
  const deg = randomNum(-30, 30)
  ctx.translate(x, y)
  ctx.rotate((deg * Math.PI) / 270)
  ctx.fillText(txt, 0, 0)
  ctx.rotate((-deg * Math.PI) / 270)
  ctx.translate(-x, -y)
}

const drawLine = (ctx) => {
  for (let i = 0; i < 2; i++) {
    ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax)
    ctx.beginPath()
    ctx.moveTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value))
    ctx.lineTo(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value))
    ctx.stroke()
  }
}

const drawDot = (ctx) => {
  for (let i = 0; i < 20; i++) {
    ctx.fillStyle = randomColor(0, 255)
    ctx.beginPath()
    ctx.arc(randomNum(0, contentWidth.value), randomNum(0, contentHeight.value), 1, 0, 2 * Math.PI)
    ctx.fill()
  }
}

const drawPic = () => {
  const canvas = document.getElementById('s-canvas')
  const ctx = canvas.getContext('2d')
  ctx.textBaseline = 'bottom'

  // Draw background
  ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax)
  ctx.fillRect(0, 0, contentWidth.value, contentHeight.value)

  // Draw text
  for (let i = 0; i < identifyCode.value.length; i++) {
    drawText(ctx, identifyCode.value[i], i)
  }

  // Draw interference lines and dots
  drawLine(ctx)
  drawDot(ctx)
}

// Watch for changes in identifyCode prop and redraw
watch(() => props.identifyCode, (newCode) => {
  identifyCode.value = newCode
  drawPic()
})

// Lifecycle hook: mounted
onMounted(() => {
  drawPic()
})
</script>

<style scoped>
.s-canvas {
  height: 38px;
}
.s-canvas canvas {
  margin-top: 1px;
  margin-left: 8px;
}
</style>
